<template>
    <MenuView />

    <div class="contextContainer">
        <UserView />

        <div class="contextTable">
            <div class="searchContainer">
                <el-input class="selectOption" v-model="inputFood" placeholder="输入菜品名称" size="large"
                    style="width: 240px" />
                <el-select class="selectOption" v-model="selectType" placeholder="选择菜品类型" size="large"
                    style="width: 240px">
                    <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-button type="primary" :icon="Search" size="large" @click="getTableData()" plain>搜索</el-button>
                <el-button type="warning" :icon="Refresh" size="large" @click="refreshData()" plain>重置</el-button>
                <el-button type="success" :icon="Plus" size="large" @click="dialogFood = true" plain>新增</el-button>
            </div>

            <div class="tableContainer">
                <el-table :data="tableData" style="width: 100%"
                    :header-cell-style="{ textAlign: 'center', backgroundColor: '#f0f8ff' }"
                    :cell-style="{ 'text-align': 'center', 'letter-spacing': '1px', 'font-weight': '600' }">
                    <el-table-column fixed prop="foodID" label="菜品编号" width="240" />
                    <el-table-column prop="foodImage" label="菜品图片" width="180">
                        <template #default="scope">
                            <img :src="scope.row.foodImage" alt="菜品图片" style="width:90%;height:auto;" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="foodName" label="菜品名称" width="150" />
                    <el-table-column prop="foodType" label="菜品种类" width="150" />
                    <el-table-column prop="foodNum" label="菜品评分" width="180" />
                    <el-table-column prop="foodPrice" label="菜品价格(单位:元)" width="200" />
                    <el-table-column fixed="right" label="操作" min-width="120">
                        <template #default="scope">
                            <!-- <el-button type="success" :icon="Edit" @click="editRow(scope.row)">编辑菜品</el-button> -->
                            <el-button type="danger" :icon="Delete" @click="deleteRow(scope.row)">删除菜品</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

    </div>

    <el-dialog v-model="dialogFood" title="菜品详情" width="500" center>
        <div class="dialogContext">
            <el-upload class="uploadImage" :file-list="dialogImage" list-type="picture"
                action="http://localhost:9090/food/uploadImage" :limit="1" :on-success="uploadImage"
                :on-remove="removeImage">
                <el-button type="primary" style="margin-right: 20%" plain>上传图片</el-button>
            </el-upload>
            <el-input v-model="dialogName" placeholder="请输入菜品名称" />
            <el-select v-model="dialogType" placeholder="选择菜品类型">
                <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-input v-model="dialogPrice" placeholder="请输入菜品单价(元)" />
        </div>
        <el-button type="primary" style="width: 100%;" @click="addData">新增菜品</el-button>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request from '../request/axios';
import { Delete, Search, Refresh, Plus } from '@element-plus/icons-vue'
import MenuView from '../components/MenuView.vue';
import UserView from '../components/UserView.vue';
import { ElMessage } from 'element-plus';

let tableData = ref();
let inputFood = ref();
let selectType = ref();
let dialogName = ref();
let dialogType = ref();
let dialogPrice = ref();
let dialogImage = ref([]);
let dialogFood = ref(false);

const typeOption = [
    {
        value: '主食类',
        label: '主食类',
    },
    {
        value: '肉蛋类',
        label: '肉蛋类',
    },
    {
        value: '海鲜类',
        label: '海鲜类',
    },
    {
        value: '蔬菜类',
        label: '蔬菜类',
    },
    {
        value: '菌菇类',
        label: '菌菇类',
    },
    {
        value: '豆奶类',
        label: '豆奶类',
    },
];

const uploadImage = (res) => {
    dialogImage.value.push(res.data);
};

const removeImage = (foodImage) => {
    // console.log(foodImage);
    if (foodImage == null) {
        request.post("/food/removeImage", {
            fileName: dialogImage.value[0]
        })
            .then((res) => {
                if (res.code === "200") {
                    ElMessage.success("图片删除成功");
                    dialogImage.value = [];
                }
            })
    } else {
        request.post("/food/removeImage", {
            fileName: foodImage
        })
            .then((res) => {
                if (res.code === "200") {
                    ElMessage.success("图片删除成功");
                    dialogImage.value = [];
                }
            })
    }
};

const refreshData = () => {
    inputFood.value = null;
    selectType.value = null;
    getTableData();
};

const addData = () => {
    request.post("/food/manager/addFood", {
        foodImage: dialogImage.value[0],
        foodName: dialogName.value,
        foodType: dialogType.value,
        foodPrice: dialogPrice.value,
    })
        .then((res) => {
            if (res.code === "200") {
                ElMessage.success("菜品添加成功");
                dialogImage.value = [];
                dialogName.value = null;
                dialogType.value = null;
                dialogPrice.value = null;
                dialogFood.value = false;
                getTableData();
            }
        })
};

const deleteRow = (row) => {
    request.post("/food/manager/delFood", {
        foodID: row.foodID
    })
        .then((res) => {
            if (res.code === "200") {
                ElMessage.success("菜品删除成功");
                removeImage(row.foodImage);
                getTableData();
            }
        })
};

const getTableData = () => {
    request.post("/food/manager/queryFood", {
        foodName: inputFood.value,
        foodType: selectType.value
    })
        .then((res) => {
            if (res.code === "200")
                tableData.value = res.data;
        });
};

onMounted(getTableData);
</script>

<style>
body,
#app {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    margin: 0%;
    padding: 0%;
}

.contextContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    height: 100%;
}

.contextTable {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 95%;
}

.searchContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-inline: 5%;
    width: 90%;
    height: 10%;
}

.tableContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    height: 90%;
}

.dialogContext {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 25vh;
}

.uploadImage {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 60%;
    height: 40%;
}
</style>